<template>
  <div class="w-bg">
    <div class="w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/allcategory' }">所有分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
  <div class="w">
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="listCart in listCarts" :key="listCart" :name="listCart.id">
          <template #title>
            <span class="catetitle">{{ listCart.name }}</span>
          </template>
          <ul class="allcate-list">
            <li v-for="Seriesname in listCart.child" :key="Seriesname" class="allcate-list-li">
              <a href="">
                <img style="margin: 0 87px 24px 87px;" height="70" width="70"
                  src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecfbf9d01c8a2605f0a6938093b23ad8.png" alt="Xiaomi MIX系列">
                <span class="name">{{ Seriesname.name }}</span>
              </a>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { allListCart } from '@/api/goods.js'

export default {
  data () {
    return {
      listCarts: [],
      activeNames: []// 默认展开
    }
  },
  methods: {
    async getallListCart () {
      try {
        const list = await allListCart()
        this.listCarts = list.data.data
        this.activeNames = []
        this.listCarts.forEach(value => {
          this.activeNames.push(value.id)
        })
      } catch (error) {
        return console.log(error)
      }
    }
  },
  created () {
    this.getallListCart()
  }
}
</script>
<script setup>
const handleChange = (val) => {
  console.log(val)
}
</script>
<style scoped>
.catetitle {
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
}

.allcate-list {
  display: flex;
  flex-wrap: wrap;
}

.allcate-list .allcate-list-li {
  height: 161px;
  width: 243.2px;
  border: 1px solid #e0e0e0;
  padding-top: 24px;
}

.allcate-list .allcate-list-li a .name {
  display: block;
  width: 100%;
  text-align: center;
  color: #000;
}
.allcate-list .allcate-list-li a:hover .name{
  color: #ff6700;
}
.el-collapse-item__header {
  border-bottom: none;
}

.span-text {
  line-height: 40px;
  color: #757575;
}

.a-text {
  line-height: 40px;
  font-size: 14px;
  text-decoration: none;
  color: #757575;
}

.a-text:hover {
  color: #ff6700;
}

.el-breadcrumb {
  height: 50px;
  line-height: 50px;
}
</style>
